<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-size: xx-small;
        }
        pre{
            margin: 0px 0px;
        }
    </style>
</head>

<body style="background-color: #1E2028;color: #41B645;">
    <div>
        当N=3
        <pre id="n=3"></pre>
    </div>
    <div>
        当N=4
        <pre id="n=4"></pre>
    </div>
    <div>
        当N=5
        <pre id="n=5"></pre>
    </div>
    <div>
        当N=10
        <pre id="n=10"></pre>
    </div>
    <div>
        当N=11
        <pre id="n=11"></pre>
    </div>
    <div>
        当N=12
        <pre id="n=12"></pre>
    </div>
    <script>
        var num = new Array();
        var n = 10;
        for (let i = 0; i < 4; i++) {
            for (let j = 65; j < 91; j++) {
                num.push(String.fromCharCode(j));
            }
        }
        var ele3 = document.getElementById("n=3");
        ele3.innerText = convert(num,3);
        var ele4 = document.getElementById("n=4");
        ele4.innerText = convert(num,4);
        var ele5 = document.getElementById("n=5");
        ele5.innerText = convert(num,5);
        var ele10 = document.getElementById("n=10");
        ele10.innerText = convert(num,10);
        var ele11 = document.getElementById("n=11");
        ele11.innerText = convert(num,11);
        var ele12 = document.getElementById("n=12");
        ele12.innerText = convert(num,12);
        function convert(num, n) {
            var lastColumn = 0;
            var lastIndex = 0;
            var result = new Array();
            for (let column = 0; column < num.length; column++) {
                var ccc = new Array();
                if (lastIndex >= num.length) {
                    break;
                }
                var add = false;
                for (let row = 0; row < n; row++) {
                    if (column == 0 || column == lastColumn + (n - 1)) {
                        add = true;
                        if (lastIndex < num.length) {
                            ccc.push(num[lastIndex]);
                            lastIndex++;
                        }
                    } else {
                        add = false;
                        if (lastIndex < num.length) {
                            let dd = n - 1 - (column % (n - 1));
                            for (let sp = 0; sp < dd; sp++) {
                                ccc.push(' ');
                            }
                            ccc.push(num[lastIndex]);
                            lastIndex++;
                            var cL = n - ccc.length;
                            for (let sp = 0; sp < cL; sp++) {
                                ccc.push(' ');
                            }
                        }
                        break;
                    }
                }
                if (add == true) {
                    lastColumn = column;
                }
                result.push(ccc);
            }
            var str = '';
            for (let row = 0; row < n; row++) {
                for (let i = 0; i < result.length; i++) {
                    var column = result[i];
                    if(row<column.length){
                        str += column[row];
                    }
                }
                str += '\r\n';
            }
            console.log('N='+n+'\r\n'+str);
            return str;
        }
    </script>
</body>

</html>